import React from 'react';
import PropTypes from 'prop-types';
import {Field} from 'redux-form';
import {injectIntl} from 'react-intl';

import {ViewMetaData} from '@folio/stripes/smart-components';
import {Accordion, Col, Datepicker, Headline, Row, Select, TextField,} from '@folio/stripes/components';

import {storageFilter} from '../../constants';

import css from './EditBookInStorageInfo.css';

class EditBookInStorageInfo extends React.Component {
  static propTypes = {
    accordionId: PropTypes.string.isRequired,
    expanded: PropTypes.bool,
    initialValues: PropTypes.object,
    intl: PropTypes.object.isRequired,
    onToggle: PropTypes.func,
  };

  render() {
    const {
      initialValues,
      expanded,
      onToggle,
      accordionId,
      intl,
    } = this.props;

    const storageOptions = [
      {
        value: '',
        label: '请选择入藏地点',
      },
      ...storageFilter.map(g => ({
        key: g.value,
        value: g.value,
        label: g.label,
      }))
    ];

    return (
      <Accordion
        label={<Headline size="large" tag="h3">馆藏入库基本信息</Headline>}
        open={expanded}
        id={accordionId}
        onToggle={onToggle}
      >

        { initialValues.metadata && <ViewMetaData metadata={initialValues.metadata} /> }

        <Row>
          <Col xs={12} md={3}>
            <Field
              component={Datepicker}
              label="入库日期"
              dateFormat="YYYY-MM-DD"
              name="inDate"
              id="inDate"
              required

            />
          </Col>
          <Col xs={12} md={3}>
            <Field
              label="书商"
              name="bookseller"
              id="add_bookseller"
              component={TextField}
              fullWidth
              required
            />
          </Col>
          <Col xs={12} md={3}>
            <Field
              label="开始条码"
              name="beginBarcode"
              id="add_beginBarcode"
              component={TextField}
              fullWidth
              required
            />
          </Col>
          <Col xs={12} md={3}>
            <Field
              label="结束条码"
              name="endBarcode"
              id="add_endBarcode"
              component={TextField}
              fullWidth
              required
            />
          </Col>
        </Row>

        <Row>
          <Col xs={12} md={3}>
            <Field
              label="总册数"
              name="totality"
              id="add_totality"
              component={TextField}
              type="number"
              fullWidth
              required
            />
          </Col>
          <Col xs={12} md={3}>
            <Field
              label="经费年份"
              name="yearFunding"
              id="add_yearFunding"
              component={TextField}
              fullWidth
              required
            />
          </Col>
          <Col xs={12} md={3}>
            <Field
              label="入库地点"
              name="storage"
              id="add_storage"
              component={Select}
              selectClass={css.storage}
              fullWidth
              dataOptions={storageOptions}
              defaultValue=""
              aria-required="true"
              required
            />
          </Col>
          <Col xs={12} md={3}>
            <Field
              label="色标"
              name="colourCode"
              id="add_colourCode"
              component={TextField}
              fullWidth
            />
          </Col>
        </Row>
        <Row>
          <Col xs={12} md={12}>
            <Field
              label="备注"
              name="remark"
              id="add_remark"
              component={TextField}
              fullWidth
            />
          </Col>
        </Row>
      </Accordion>
    );
  }
}

export default injectIntl(EditBookInStorageInfo);
